Custome Elementのlife cycle
code:CustomElement.js
class CustomElement extends HTMLElement {
要素の作成
この段階ではまだ属性が設定されていない
getAttribute()を使ってもnullしか返ってこない
派生クラスなのでsuper()を呼んでおく
constructor()をoverrideしない場合はいらないと思う
code:CustomElement.js
constructor() {
super();
}
documentに追加されたときに呼び出される関数
appendChild()などで呼び出されたタイミングではなく、実際にrenderされたタイミングで呼び出されるんだと思う
code:CustomElement.js
connectedCallback() {
if (this.rendered) return;
this.render();
this.rendered = true;
}
要素のrender処理
複数の場所で要素のrender処理が行われるので、関数化してひとまとめにしておくと扱いやすくなる
名前は何でもいいが、render()がわかりやすいと思う
code:CustomElement.js
render () {
}
属性の変更
予め指定した属性が変更されると呼び出される関数
name: 変更された属性の名前
oldValue: 変更前の値
newValue: 変更後の値
code:CustomElement.js
attributeChangedCallback(name, oldValue, newValue) {
this.render();
}
code:CustomElement.js
static get observedAttributes() {
return 変更を監視する属性名の配列 */;
}
要素の削除
code:CustomElement.js
disconnectedCallback() {
}
めったに使わないやつ
要素が別のNodeに移動されたときに呼び出されるやつ
まず使うことはないだろう
code:CustomElement.js
adoptedCallback() {
}
}
Reference